<template>
  <div class="ball">
    <div class="value">{{data.value}}</div>
  </div>
  <div class="label">{{data.label}}</div>
</template>

<script setup lang="ts">
defineProps({
  data: {
    type: Object as () => ({label: string, value: number}),
    required: true
  }
})

</script>

<style scoped>
.ball {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url('@/assets/preview (15).png'); /* 背景图片 */
  background-size: cover;
  background-repeat: no-repeat;
  position: relative; /* 保证子元素可以使用绝对位置 */
}
.value{
  margin-bottom: 15px;
  display: flex;
  font-family: "D-DIN-PRO-FVS Medium";
  color: rgb(255, 254, 220);
  font-size: 30px;
  writing-mode: horizontal-tb;
  letter-spacing: 2px;
  text-orientation: upright;
  filter: drop-shadow(0px 2px 8px rgba(255, 254, 220, 0.7));
  user-select: text;
}
.label{
  font-size: 14px;
  font-weight: bold;
}
</style>
